﻿<!DOCTYPE html>
<html lang=ja>
<head>
<meta charset=UTF-8>
<title>通知情報一覧画面</title>
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta name="viewport" content="width=device-width, initial-scale=1,maximun-scale=1">
<style type="text/css">
body {font-family: "ＭＳ ゴシック",Osaka,sans-serif;}
table.sample{
        border-top:1px solid #b0c4de;
        border-left:1px solid #b0c4de;
        border-collapse:collapse;
        border-spacing:0;
        background-color:#ffffff;
        empty-cells:show;
}
.sample td{
        border-right:1px solid #b0c4de;
        border-bottom:1px solid #b0c4de;
        padding:0.8em 1em;
        font-size: 0.8em;
        text-align: center;
}
div no.1{ height: 30px; }
div no.2{ width: 100%; }
</style>

<script type="text/javascript" src="{{script}}"></script>
<script type="text/javascript">
if(typeof window.console!='object'){window.console={log:function(){},debug:function(){},info:function(){},warn:function(){},error:function(){},assert:function(){},dir:function(){},dirxml:function(){},trace:function(){},group:function(){},groupEnd:function(){},time:function(){},timeEnd:function(){},profile:function(){},profileEnd:function(){},count:function(){}};}
</script>
<script type="text/javascript">
<!--
(function(){
var token;
var client_id;
var socket=null;
var channel=null;
window.onload=function(){
	//document.sendForm.sendButton.disabled=true;
	document.loginForm.onsubmit=login;
	document.sendForm.onsubmit=send;
}
/**
 * ソケット通信のログイン
 * @param	event
 */
function login(event){
	if(socket!=null){
		//ソケット通信切断
		socket.channelId_=null;
		socket.close();
		socket=null;
		document.sendForm.sendButton.disabled=true;
		return false;
	}
	
	var url=event.target.action;
	var http=new XMLHttpRequest();
	http.open('GET',url,true);
	http.onreadystatechange=function(){
		//4で受信完了
		if (http.readyState==4){
			console.group('login');
			try{
				var json=eval('('+http.responseText+')');
				console.log(json);
				token=String(json.token);
				client_id=String(json.client_id);
				if(json.users){
					document.getElementById('users_num').innerHTML=String(json.users.length);
				}
				initialize();
			}catch(err){
				console.error(err);
				console.log(http.responseText);
			}
			console.groupEnd();
		}
	}
	http.send();
	return false;
}

/**
 * ソケット通信の準備をする
 */
function initialize(){
	channel=new goog.appengine.Channel(token);
	socket=channel.open({
		onopen:function(){
			//ソケットopen完了時(受信可となったタイミング)にコールされる処理
			console.log('onopen');
			//document.sendForm.sendButton.disabled=false;
			//output('接続が完了しました。');
			document.loginForm.loginButton.value="接続を切断";
		},
		onmessage:receive,
		onerror:function(error){
			//エラー時に発生するイベント
			console.error('onerror');
		},
		onclose:function(){
			console.log('onclose');
			output('接続を閉じました。');
			document.loginForm.loginButton.value="接続開始";
		}
	});
}

/**
 * 新しいメッセージを送信する
 * @param	event
 */
function send(event){
	if(document.sendForm.sendButton.disabled)return false;
	var value=document.getElementById('message').value;
	if(value==""){
		alert("メッセージを入力してください");
		return false;
	}
	document.getElementById('message').value="";
	document.sendForm.sendButton.disabled=true;
	var url=event.target.action;
	var params='value='+encodeURIComponent(value)+'&client_id='+client_id;
	var path=url+'?time='+(new Date().getTime());
	var http=new XMLHttpRequest();
	http.open('POST',path,true);
	//Tokenの受信時に呼ばれる関数
	http.onreadystatechange=function(){
		//4で受信完了
		if (http.readyState==4){
			document.sendForm.sendButton.disabled=false;
		}
	}
	http.setRequestHeader("content-type","application/x-www-form-urlencoded;charset=UTF-8");
	http.send(params);
	return false;
}
-->
</script>
</head>
<body bgcolor="lightcyan" >
<div class="no.1">
 <table align="right" height="1px"  >
  <tr style="font-size: 10px; color: blue;">
  <td><a href="/regist">通知登録へ</a></td>
  <td width="8px"></td>
  <td><a href="url">ログアウト</a></td>
  </tr>
 </table>


 <h3 >通知情報一覧画面</h3>
 <table align="right" >
  <tr>
   <td><input type="submit"  name="再利用" value ="再利用"></td>
   <td colspan="2"><input type="submit"  name="修正" value="修正"></td>
  </tr>
 </table>
</div>
<br /><br />
<br>
<div class="no.2">
 <table class="sample" width="98%" align="center" >
 <tr bgcolor="#e6e6fa" ><td rowspan="3" width="10%" >選択</td>
 <td style="padding:0.5em 1em;">タイトル</td></tr>
 <tr bgcolor="#e6e6fa"><td style="padding:0.5em 1em;">日時</td></tr>
 <tr bgcolor="#e6e6fa"><td style="padding:0.5em 1em;">本文</td></tr>
 

  {{html}}
</table>
</div>
</body>
</html>